// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';
import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import FontAwesome from '@expo/vector-icons/FontAwesome';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            position: 'absolute',
            height: 60,
          },
          default: {
            position: 'absolute',
            height: 60,
          },
        }),
      }}>
      {/* 主要的 Tab 页面 */}
      <Tabs.Screen
        name="HomePage"
        options={{
          title: '我家',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="ScenePage"
        options={{
          title: '场景',
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name="gear" color={color} size={20} />
          ),
        }}
      />
      <Tabs.Screen
        name="DevicePage"
        options={{
          title: '设备',
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name="plug" color={color} size={20} />
          ),
        }}
      />
      <Tabs.Screen
        name="UserPage"
        options={{
          title: '我的',
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name="user" color={color} size={20} />
          ),
        }}
      />
      {/* <Tabs.Screen
        name="test"
        options={{
          title: '组件测试页',
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name="wrench" color={color} size={20} />
          ),
        }}
      /> */}
      
      {/* 次级页面 - 不显示在 Tab 栏中，但仍然保持底部导航栏 */}
      <Tabs.Screen
        name="SceneListPage"
        options={{
          href: null, // 关键：这会隐藏这个页面，不在 Tab 栏中显示
        }}
      />

      <Tabs.Screen
        name="test"
        options={{
           href: null, // 关键：这会隐藏这个页面，不在 Tab 栏中显示
          // title: '组件测试页',
          // tabBarIcon: ({ color, size }) => (
          //   <FontAwesome name="wrench" color={color} size={20} />
          // ),
        }}
      />
    

      {/* 未来可以添加更多次级页面 */}
      {/* 
      <Tabs.Screen
        name="SceneDetailPage"
        options={{
          href: null, // 隐藏，但保持底部导航栏
        }}
      />
      <Tabs.Screen
        name="DeviceListPage"
        options={{
          href: null, // 隐藏，但保持底部导航栏
        }}
      />
      */}
    </Tabs>
  );
}